<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>八年级电荷相互作用演示</title>
    <style>
        body{margin:0;font-family:"Microsoft YaHei";background:#f5f5f5}
        #canvas{background:#fff;border:1px solid #ccc;display:block;margin:20px auto}
        .panel{width:600px;margin:0 auto;text-align:center}
        button{margin:0 10px;padding:8px 16px;font-size:16px;border:none;border-radius:4px;cursor:pointer}
        .positive{background:#e74c3c;color:#fff}
        .negative{background:#3498db;color:#fff}
        .info{margin-top:10px;font-size:14px;color:#555}
    </style>
</head>
<body>
    <div class="panel">
        <h2>电荷相互作用演示</h2>
        <canvas id="canvas" width="600" height="400"></canvas>
        <div>
            <button class="positive" onclick="addCharge('positive')">添加正电荷</button>
            <button class="negative" onclick="addCharge('negative')">添加负电荷</button>
            <button onclick="reset()">重置</button>
        </div>
        <div class="info">
            <p>同种电荷相互排斥，异种电荷相互吸引</p>
            <p>拖拽小球改变位置，观察力的变化</p>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let charges = [];
        let dragCharge = null;

        class Charge {
            constructor(x, y, type) {
                this.x = x;
                this.y = y;
                this.type = type; // 'positive' 或 'negative'
                this.radius = 20;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
                ctx.fillStyle = this.type === 'positive' ? '#e74c3c' : '#3498db';
                ctx.fill();
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // 绘制电荷符号
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 20px Arial';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText(this.type === 'positive' ? '+' : '−', this.x, this.y);
            }

            distanceTo(other) {
                const dx = this.x - other.x;
                const dy = this.y - other.y;
                return Math.sqrt(dx*dx + dy*dy);
            }
        }

        function drawForces() {
            // 绘制力线
            ctx.strokeStyle = '#2ecc71';
            ctx.lineWidth = 2;
            
            for (let i = 0; i < charges.length; i++) {
                for (let j = i + 1; j < charges.length; j++) {
                    const c1 = charges[i];
                    const c2 = charges[j];
                    const dist = c1.distanceTo(c2);
                    
                    if (dist > 100) continue; // 只显示近距离的力
                    
                    // 计算力的方向
                    const dx = c2.x - c1.x;
                    const dy = c2.y - c1.y;
                    const angle = Math.atan2(dy, dx);
                    
                    // 同种电荷排斥，异种电荷吸引
                    const force = (c1.type === c2.type) ? -1 : 1;
                    const length = 30;
                    
                    // 从c1指向c2的力线
                    const endX = c1.x + Math.cos(angle) * length * force;
                    const endY = c1.y + Math.sin(angle) * length * force;
                    
                    ctx.beginPath();
                    ctx.moveTo(c1.x, c1.y);
                    ctx.lineTo(endX, endY);
                    ctx.stroke();
                    
                    // 箭头
                    const arrowSize = 8;
                    ctx.beginPath();
                    ctx.moveTo(endX, endY);
                    ctx.lineTo(endX - arrowSize*Math.cos(angle - Math.PI/6), 
                            endY - arrowSize*Math.sin(angle - Math.PI/6));
                    ctx.moveTo(endX, endY);
                    ctx.lineTo(endX - arrowSize*Math.cos(angle + Math.PI/6), 
                            endY - arrowSize*Math.sin(angle + Math.PI/6));
                    ctx.stroke();
                }
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制力线
            drawForces();
            
            // 绘制电荷
            charges.forEach(charge => charge.draw());
        }

        function addCharge(type) {
            const x = Math.random() * (canvas.width - 100) + 50;
            const y = Math.random() * (canvas.height - 100) + 50;
            charges.push(new Charge(x, y, type));
            draw();
        }

        function reset() {
            charges = [];
            draw();
        }

        // 鼠标事件
        canvas.addEventListener('mousedown', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            // 检查是否点击了电荷
            for (const charge of charges) {
                const dx = x - charge.x;
                const dy = y - charge.y;
                if (Math.sqrt(dx*dx + dy*dy) < charge.radius) {
                    dragCharge = charge;
                    break;
                }
            }
        });

        canvas.addEventListener('mousemove', (e) => {
            if (dragCharge) {
                const rect = canvas.getBoundingClientRect();
                dragCharge.x = e.clientX - rect.left;
                dragCharge.y = e.clientY - rect.top;
                draw();
            }
        });

        canvas.addEventListener('mouseup', () => {
            dragCharge = null;
        });

        // 初始添加两个电荷
        charges.push(new Charge(200, 200, 'positive'));
        charges.push(new Charge(400, 200, 'negative'));
        draw();
    </script>
</body>
</html>
